import React, { Component } from 'react';
import { connect } from 'dva';
import { Form, Divider } from 'antd';
import { withRouter } from 'umi';
import moment, { isDate } from 'moment';
import prompt from '@/components/Prompt';
import StandardTable from '@/components/StandardTable';
import AntdInput from '@/components/AntdInput';
import AdSelect from '@/components/AdSelect';
import AntdForm from '@/components/AntdForm';
import AntdFormItem from '@/components/AntdFormItem';
import AntdDatePicker from '@/components/AntdDatePicker';
import FileReader from '@/components/FileReader';
import { allDictList } from '@/utils/constans';
import {
    queryDict,
    filterAddFile,
    filterDeteteFile,
    formatPrice,
    formatNumInt,
} from '@/utils/common';
import { allDispatchType, renderTableAdSelect } from './utils';

@connect(({ exportOS, component, loading }) => ({
    dictObject: component.dictObject,
    cargoInfoList: exportOS.cargoInfoList,
    exportOSDetail: exportOS.exportOSDetail,
    // loading: loading.effects[allDispatchType.incidentalInfo],
}))
@Form.create()
@withRouter
export default class ExportOSInfo extends Component {
    constructor(props) {
        super(props);
        const {
            form: { getFieldDecorator },
        } = props;
        this.state = {
            detailId: '',
            preData: {},
        };
        this.commonParams = {
            getFieldDecorator,
        };
    }

    columns = [
        {
            title: '产品编号',
            dataIndex: 'productID',
            width: 150,
            render: (text, record) => {
                const { dictObject, onlyRead, disabled } = this.props;
                if (!onlyRead) {
                    return (
                        <AntdFormItem
                            label=" "
                            code={`productID-${record.id}`}
                            initialValue={text}
                            {...this.commonParams}
                        >
                            <AntdInput
                                disabled={disabled}
                                placeholder=""
                                onChange={value => this.handleFieldChange(value, 'productID', record)}
                            />
                        </AntdFormItem>
                    );
                }
                return <span>{text}</span>;
            },
        },
        {
            title: '托盘数量',
            dataIndex: 'plNumber',
            width: 100,
            render: (text, record) => {
                const { dictObject, onlyRead, disabled } = this.props;
                if (!onlyRead) {
                    return (
                        <AntdFormItem
                            label=" "
                            code={`plNumber-${record.id}`}
                            initialValue={formatNumInt(text) || 1}
                            {...this.commonParams}
                            rules={[{ required: true }]}
                        >
                            <AntdInput
                                disabled={disabled}
                                placeholder=""
                                onChange={value => this.handleFieldChange(value, 'plNumber', record)}
                            />
                        </AntdFormItem>
                    );
                }
                return <span>{formatNumInt(text)}</span>;
            },
        },
        {
            title: '纸箱数量',
            dataIndex: 'csNumber',
            width: 100,
            render: (text, record) => {
                const { dictObject, onlyRead, disabled } = this.props;
                if (!onlyRead) {
                    return (
                        <AntdFormItem
                            label=" "
                            code={`csNumber-${record.id}`}
                            initialValue={formatNumInt(text) || 0}
                            {...this.commonParams}
                            rules={[{ required: true }]}
                        >
                            <AntdInput
                                disabled={disabled}
                                placeholder=""
                                onChange={value => this.handleFieldChange(value, 'csNumber', record)}
                            />
                        </AntdFormItem>
                    );
                }
                return <span>{formatNumInt(text)}</span>;
            },
        },
        {
            title: '重量(KG)',
            dataIndex: 'weight',
            width: 100,
            render: (text, record) => {
                const { onlyRead, disabled } = this.props;
                if (!onlyRead) {
                    return (
                        <AntdFormItem
                            label=" "
                            code={`weight-${record.id}`}
                            {...this.commonParams}
                            initialValue={formatPrice(text)}
                        >
                            <AntdInput
                                disabled={disabled}
                                placeholder=""
                                onChange={value => this.handleFieldChange(value, 'weight', record)}
                            />
                        </AntdFormItem>
                    );
                }
                return <span>{formatPrice(text)}</span>;
            },
        },
        {
            title: '包装尺寸(CM)',
            dataIndex: 'dimension',
            width: 150,
            render: (text, record) => {
                const { onlyRead, disabled } = this.props;
                if (!onlyRead) {
                    return (
                        <AntdFormItem
                            label=" "
                            code={`dimension-${record.id}`}
                            initialValue={text}
                            {...this.commonParams}
                        >
                            <AntdInput
                                disabled={disabled}
                                placeholder=""
                                onChange={value => this.handleFieldChange(value, 'dimension', record)}
                            />
                        </AntdFormItem>
                    );
                }
                return <span>{text}</span>;
            },
        },
        {
            title: '最小包装数(PCS)',
            dataIndex: 'pieces',
            width: 150,
            render: (text, record, i) => {
                const { onlyRead, disabled } = this.props;
                if (!onlyRead) {
                    return (
                        <AntdFormItem
                            label=" "
                            code={`pieces-${record.id}`}
                            initialValue={formatNumInt(text)}
                            {...this.commonParams}
                        >
                            <AntdInput
                                disabled={disabled}
                                placeholder=""
                                onChange={value => this.handleFieldChange(value, 'pieces', record)}
                            />
                        </AntdFormItem>
                    );
                }
                return <span>{formatNumInt(text)}</span>;
            },
        },
        {
            title: '备注',
            dataIndex: 'remark',
            width: 200,
            render: (text, record) => {
                const { onlyRead, disabled } = this.props;
                if (!onlyRead) {
                    return (
                        <AntdFormItem
                            label=" "
                            code={`remark-${record.id}`}
                            initialValue={text}
                            {...this.commonParams}
                        >
                            <AntdInput
                                disabled={disabled}
                                placeholder=""
                                onChange={value => this.handleFieldChange(value, 'remark', record)}
                            />
                        </AntdFormItem>
                    );
                }
                return <span>{text}</span>;
            },
        },
    ];

    componentWillMount() {
        const { dispatch, detailId } = this.props;
        this.saveAllValue({ cargoInfoList: { [detailId]: { list: [] } } });
        // const allDict = [allDictList.archives_place];
        // queryDict({ props: this.props, allDict });
    }

    componentDidMount() {
        const { detailId, cargoInfoList, onRef, exportOSDetail } = this.props;
        onRef && onRef(this);

        if (!detailId) return;
        this.handleStateChange([{ detailId }]);
    }

    componentWillReceiveProps(nextProps, nextState) {
        const { cargoInfoList } = nextProps;
        const id = nextProps.detailId;
        const { detailId } = nextState;
        if (
            !id &&
            !this.state.detailId &&
            (!detailId || (detailId && detailId === '')) &&
            !cargoInfoList[this.state.detailId]
        ) {
            this.saveAllValue({
                cargoInfoList: { [this.state.detailId]: { list: [this.getAddDataObj()] } },
            });
        }
        if (this.props.detailId !== id) {
            this.handleStateChange([{ detailId: id }]);
            // this.cargoInfoList(id);
        }
    }

    getAddDataObj = () => {
        return {
            id: `isNew${Math.ceil(Math.random() * 10000) + 10000}`,
            productID: '',
            plNumber: 1,
            csNumber: 0,
            weight: '',
            dimension: '',
            pieces: '',
            remark: '',
        };
    };

    addInfo = () => {
        const { detailId } = this.state;
        let newData = this.getInfoData();
        newData = [this.getAddDataObj(), ...newData];
        this.saveAllValue({ cargoInfoList: { [detailId]: { list: newData } } });
    };

    getInfoData = () => {
        const { cargoInfoList } = this.props;
        const { detailId } = this.state;

        let newData = [];
        if (cargoInfoList[detailId]) {
            const data = cargoInfoList[detailId].list;
            newData = data.map(item => ({ ...item }));
        }
        return newData;
    };

    getRowByKey(id, newData) {
        const data = this.getInfoData();
        return (newData || data).filter(item => item.id === id)[0];
    }

    handleFieldChange(value, fieldName, record) {
        const { dispatch, form, showTipsFun, detailId } = this.props;
        const { id } = record;
        showTipsFun(true);
        const newData = this.getInfoData();
        const target = this.getRowByKey(id, newData);
        if (target) {
            target[fieldName] = value;
        }
        this.saveAllValue({ cargoInfoList: { [detailId]: { list: newData } } });
    }

    saveAllValue = payload => {
        const { dispatch } = this.props;
        dispatch({
            type: allDispatchType.value,
            payload: payload || {},
        });
    };

    handleStateChange = (options = []) => {
        options.map(item => {
            this.setState(item);
        });
    };

    render() {
        const { cargoInfoList, loading, onSelectRow, selectedRows, detailId, disabled } = this.props;
        const { } = this.state;
        const data = cargoInfoList[detailId] || {};
        return (
            <div className="cus_itemTableInfo">
                <AntdForm>
                    <StandardTable
                        // customIdName="partId"
                        loading={loading}
                        data={data}
                        columns={this.columns}
                        selectedRows={selectedRows}
                        disabledRowSelected={disabled}
                        pagination={false}
                        scrollX={900}
                        scrollY={200}
                        canInput={true}
                        onSelectRow={selectedRows => {
                            onSelectRow(selectedRows);
                        }}
                    />
                </AntdForm>
            </div>
        );
    }
}
